import React, { useEffect, useState } from "react";
import { ActionSheet, Toast } from "antd-mobile";

import Navbar from "../../components/Navbar";
import HouseList from "../../components/HouseList";
import { BASEURL, reqGetHousePublishList } from "../../api";
import "./index.scss";

const isIPhone = new RegExp("\\biPhone\\b|\\biPod\\b", "i").test(
  window.navigator.userAgent
);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: (e) => e.preventDefault(),
  };
}

export default function Manage(props) {
  const { history } = props;

  const [list, setList] = useState(null);

  const [clicked] = useState({
    上架: () => Toast.info("暂不支持上架操作", 2, null, false),
    下架: () => Toast.info("暂不支持下架操作", 2, null, false),
    查看: (path, state) => history.push(path, state),
    删除: () => Toast.info("暂不支持删除操作", 2, null, false),
    取消: () => console.log("取消"),
  });

  const showActionSheet = ({ path, state }) => {
    const BUTTONS = ["上架", "下架", "查看", "删除", "取消"];
    ActionSheet.showActionSheetWithOptions(
      {
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        destructiveButtonIndex: BUTTONS.length - 2,
        title: "管理菜单",
        maskClosable: true,
        wrapProps,
      },
      (buttonIndex) => {
        console.log(buttonIndex);
        clicked[BUTTONS[buttonIndex]](path, state);
      }
    );
  };

  useEffect(() => {
    async function getList() {
      let res = await reqGetHousePublishList();
      setList(res.body);
    }
    if (!list) getList();
  }, [list]);

  return (
    <div>
      <div className="manage-navbar">
        <Navbar
          title="房源管理"
          right={
            <span
              style={{ color: "#21b97a" }}
              onClick={() => history.push("/publish")}
            >
              发布
            </span>
          }
        ></Navbar>
      </div>
      <div className="manage-content">
        {list === null || list.length === 0 ? (
          <div className="empty">
            <img src={BASEURL + "/img/not-found.png"} alt="" />
            <span>
              您还没有房源，去
              <span
                style={{ color: "#21b97a" }}
                onClick={() => history.push("/publish")}
              >
                发布房源
              </span>
              吧
            </span>
          </div>
        ) : (
          <HouseList
            list={list}
            history={history}
            showActionSheet={showActionSheet}
          />
        )}
      </div>
    </div>
  );
}
